<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

         body {
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
            color: #333;
            background-color: #fff;
            min-width: 1226px;
         }


         .site-topbar{
            width: 100%;
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;
         }

         .container{
             width: 1226px;
             margin: 0 auto;
             /*height: 40px;*/
             /*background-color: lightskyblue;*/
         }


         .topbar-nav{
             float: left;
             height: 40px;
             line-height: 40px;
         }

         .topbar-nav a{
             color: #b0b0b0;
             line-height: 40px;
             display: inline-block;
             text-decoration: none;
         }

         .topbar-nav span{
              color: #424242;
         }

         .topbar-cart{
             float: right;
             width: 120px;
             height: 40px;
             text-align: center;
             line-height: 40px;
             color: #b0b0b0;
             background: #424242;

         }

         .topbar-cart a{
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #b0b0b0;
            background: #424242;
            text-decoration: none;
         }

         .topbar-info{
            float: right;
            height: 40px;
            line-height: 40px;
         }

         .topbar-info a{
             float: left;
             text-decoration: none;
             padding: 0 5px;
             color: #b0b0b0;
             line-height: 40px;
             /*background-color: orange;*/
         }

         .topbar-info span{
              float: left;
              /*color: #424242;*/
         }

         .site-header{
              /*background-color: #616161;*/
              z-index: 20;
              height: 100px;
         }

         .site-header .container{
              width: 1266px;
              margin: 0 auto;
              background-color: orange;
         }
         .header-logo{
              width: 234px;
              float: left;
              margin-top: 20px;
         }

         .header-logo .logo{
             float: left;
             width: 56px;
             height: 56px;
             background: url("//s02.mifile.cn/assets/static/image/logo-mi2.png") no-repeat;
             background-size: 56px;
         }

         .header-nav{
             width: 990px;
             float: left;
         }

         .nav-list{
             list-style: none;
             float: left;
             height: 88px;
             padding: 12px 0 0 30px;
             font-size: 16px;
             /*border: 1px solid indianred;*/

         }
         .nav-list .nav-item{
             float: left;
         }

         .nav-list .nav-item a{
             display: block;
             padding: 22px 10px 38px;
             text-decoration: none;
             color: #333;
             /*border: 1px solid green;*/
         }

         .site-category{
              position:absolute;
              top:167px;
              left:340px;
              z-index: 21;
              width: 234px;
              height: 460px;
              font-size: 14px;
         }

         .site-category-list.site-category-list-custom{
               height:420px;
               border: 0;
               color: #fff;
               background: rgba(105,101,101,6);
         }


         .site-category-list{
               height: 418px;
               margin:0;
               padding: 20px 0;
               list-style-type: none;
               border:1px solid #ff6700;
               background: #fff;
         }

          .site-category-list.title{
               position: relative;
               display:block;
               padding-left: 30px;
               height:42px;
               line-height:42px;
               color: #424242;
          }

          .site-category-list.title em[class*=iconfont]{
                position: absolute;
                top: 12px;
                right: 20px;
                font-size: 16px;
                line-height: 16px;
                color: #e0e0e0;
          }



         .header-search{
            float: right;
            width: 296px;
            height: 100px;
            /*border: 1px solid red;*/
            margin-top: 27px;
         }

         .header-search .search-form{
            position: relatve;
            display: block;
            width: 296px;
            height: 50px;
         }

         .header-search .search-form .input{
            position: absolute;
            top: 77px;
            /*border: 1px solid #e0e0e0;*/
         }

         .header-search .search-text{
            left: 0;
            width: 223px;
            height: 50px;
            padding: 0px 10px;
            float: left;
         }

         .header-search .search-btn{
            right: 0;
            width: 45px;
            height: 54px;
            line-height: 50px;
         }

         .home-hero-container{
            position: relative;
            z-index: 10;
         }

         .container{
            width: 1240px;
            margin-right: auto;
            margin-left: auto;
         }

         .home-hero{
            position: relative;
            margin-bottom: 26px;
         }

         .
         .home-hero-swiper{
            position: relative;
            height: 460px;
            overflow: hidden;
         }

         .swiper-container{
            margin: 0 auto;
            list-style: none;
            padding: 0;
            z-index: 1;
         }
         .swiper-wrapper{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            transition-property: transform, -webkit-transform;
            box-sizing: content-box;
         }

         .home-hero-swiper .swiper-slide a{
            display: block;
            backgroud: url(//i1.mifile.cn/f/i/2014/cn/placeholder-220.png) no-repeat 620px;
         }
        li {
            display: list-item;
            text-align: -webkit-match-parent;
            unicode-bidi: isolate;
        }
        .site-category-list.site-category-list-custom {
            height: 420px;
            border: 0;
            color: #fff;
            background: rgba(105, 101, 101, .6);
        }
        .site-category-list {
            height: 418px;
            margin: 0;
            padding: 20px 0;
            list-style-type: none;
            border: 1px solid #ff6700;
            color: #424242;
            background: #fff;
        }
        .site-category-list .title {
            position: relative;
            display: block;
            padding-left: 30px;
            height: 42px;
            line-height: 42px;
            color: #424242;
        }
        .home-hero .home-hero-sub {
            margin-top: 14px;
        }
        .span4 {
            width: 234px;
        }
        .home-channel-list {
            margin: 0;
            padding: 3px;
            list-style-type: none;
            font-size: 12px;
            text-align: center;
            background: #5f5750;
        }
        .home-channel-list a {
            display: block;
            padding-top: 18px;
            text-overflow: ellipsis;
            color: #fff;
            opacity: .7;
            -webkit-transition: opacity .2s;
            transition: opacity .2s;
        }
        .home-channel-list img {
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }
    </style>
</head>

<body>
<div class="header clearfix">
    <div class="site-topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a href="">云服务</a>
                <span>|</span>
                <a href="">电视</a>
                <span>|</span>
            </div>
            <div class="topbar-cart">
                <a href="">购物车<span>(0)</span></a>
            </div>
            <div class="topbar-info">
                <a href="">登录</a>
                <span>|</span>
                <a href="">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
    <div class="site-header">
        <div class="container">
            <div class="header-logo">
                <a href="" class="logo"></a>
            </div>
            <div class="header-nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href=""><span>小米</span></a></li>
                    <li class="nav-item"><a href=""><span>红米</span></a></li>
                    <li class="nav-item"><a href=""><span>电视</span></a></li>
                    <li class="nav-item"><a href=""><span>笔记本</span></a></li>
                    <li class="nav-item"><a href=""><span>服务</span></a></li>
                </ul>
                <div class="site-category" style="display:block;">
                    <ul id="j_categorylist" class="site-category-list clearfix site-category-list-custom">
                        <li class="category-item">
                            <a class="title">手机</a>
                        </li>
                        <li class="category-item">
                            <a class="title">电视</a>
                        </li>
                        <li class="category-item">
                            <a class="title">家电</a>
                        </li>
                        <li class="category-item">
                            <a class="title">笔记本 平板</a>
                        </li>
                        <li class="category-item">
                            <a class="title">出行 穿戴</a>
                        </li>
                        <li class="category-item">
                            <a class="title">耳机 音箱</a>
                        </li>
                        <li class="category-item">
                            <a class="title">健康 儿童</a>
                        </li>
                        <li class="category-item">
                            <a class="title">生活 箱包</a>
                        </li>
                        <li class="category-item">
                            <a class="title">智能 路由器 </a>
                        </li>
                        <li class="category-item">
                            <a class="title">电源 配件</a>
                        </li>
                    </ul>
                </div>
                <div class="header-search">
                    <form action="search-form">
                        <input type="text" class="search-text" placeholder="小米11">
                        <input type="submit" class="search-btn" value="按钮">
                    </form>
                </div>
            </div>
        </div>
    </div>

<div class="home-hero-container container">
    <div class="home-hero">
        <div id="J_homeswiper" class="swiper-container home-hero-swiper swiper-no-swiping swiper-container-fade swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" style="transition-duration: 0ms;">
                <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next">
                    <a target="_blank">
                        <img alt class="swiper-lazy swiper-lazy-loaded" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0be0dcb14d834d562cba81e6b1b4580c.jpg?thumb=1&w=1226&h=460&f=webp&q=90">
                    </a>
                </div>
            </div>
        </div>
    <div class="home-hero-sub row">
        <div class="span4">
            <ul class="home-channel-list clearfix">
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&amp;h=48" alt="保障服务">
                        "保障服务"
                    </a>
                </li>
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="企业团购">
                        "企业团购"
                    </a>
                </li>
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="F码通道">
                        "F码通道"
                    </a>
                </li>
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="米粉卡">
                        "米粉卡"
                    </a>
                </li>
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="以旧换新">
                        "以旧换新"
                    </a>
                </li>
                <li>
                    <a>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="话费充值">
                        "话费充值"
                    </a>
                </li>

            </ul>
        </div>
        <div >

        </div>
    </div>
    </div>
</div>


    </div>

</body>
</html>